<template>
  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="Message：">
      <a-input v-model:value="formState.message" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">Submit to Native</a-button>
      <a-button style="margin-left: 10px" @click="clear">Cancel</a-button>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="dashed" @click="apiSubmit">调用Native Api接口</a-button>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="locationSubmit">获取定位</a-button>
    </a-form-item>

    <a-form-item label="Result:">
      <a-textarea placeholder="result in here" :value="formState.result" :disabled="true" :autosize="true" />
    </a-form-item>
  </a-form>
</template>
<script>
import { getCurrentInstance, defineComponent, reactive, toRaw } from 'vue';
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const formState = reactive({
      message: '',
      result: ''
    });

    /**
     * 清除
     */
    const clear = async () => {
      formState.message = ""
      formState.result = ""
    }

    /**
     * 参数提交 native 并获得返回
     */
    const onSubmit = async () => {
      try {
        proxy.$jsbridge.callHandler("test", formState.message, function (data) {
          console.log("native data is:", data)
          formState.result = data
        })
      } catch (error) {
        console.log(error);
      }
    };

    /**
     * 通过 native 调用 webservice
     */
    const apiSubmit = async () => {
      try {
        proxy.$jsbridge.callHandler("callCmsBanner", formState.message, function (data) {
          console.log("native data is:", data)
          formState.result = data
        })
      } catch (error) {
        console.log(error);
      }
    };

    /**
     * 获取定位
     */
    const locationSubmit = async () => {
      try {
        proxy.$jsbridge.callHandler("callLocation", formState.message, function (data) {
          console.log("native data is:", data)
          formState.result = data
        })
      } catch (error) {
        console.log(error);
      }
    };
    return {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      formState,
      onSubmit,
      apiSubmit,
      locationSubmit,
      clear
    };
  },
});
</script>